<template>
	<view class="page">
		<view class="date">
			<view class="label">
				活动时间：
			</view>
			<uni-datetime-picker type="date" :clear-icon="false" placeholder='请选择活动时间' v-model="data.single" :border="false"
			@maskClick="bindDateChange" :end="data.endTime"
			 @rest='restFn'
			 />
		</view>
		
		<view class="container" v-for="i in data.list">
			<view class="container-item">
				<view class="container-label">
					活动创建时间：
				</view>
				<view class="container-value">
					{{i.activeCreateTime}}
				</view>
			</view>
			<view class="container-item">
				<view class="container-label">
					用户昵称：
				</view>
				<view class="container-value">
					{{i.userNickName?i.userNickName:""}}
				</view>
			</view>
			<view class="container-item">
				<view class="container-label">
					活动类目：
				</view>
				<view class="container-value">
					{{activityClassName(i.activityClassification)}}
				</view>
			</view>
			<view class="container-item">
				<view class="container-label">
					活动名称：
				</view>
				<view class="container-value">
					{{i.activityName}}
				</view>
			</view>
			<view class="container-item">
				<view class="container-label">
					活动描述：
				</view>
				<view class="container-value">
					{{i.declarationDescribe}}
				</view>
			</view>
			<view class="container-item">
				<view class="container-label">
					获得积分：
				</view>
				<view class="container-value">
					{{i.rewardPoints?i.rewardPoints:0}}
				</view>
			</view>
		</view>
		<view class="loading" ref="loading">
			{{isLoading}}
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		integralDetailApi
	} from "@/api/integral.js"
	import {
		listData
	} from "@/api/index.js"
	import {
		reactive,
		onMounted,
		ref,
		computed,
		watch
	} from "vue";
	const isLoading = ref("")
	const dictData = ref(null)
	const data = reactive({
		total: 0,
		list: [],
		single: "",
		endTime: ""
	})
	const queryParams = reactive({
		params: {
			pageSize: 20,
			pageNum: 1,
			startTime:"",
			endTime:""
		},
		belongToArea: null,
		declarationYear:null
	})
	
	onLoad(async (option) => {
		queryParams.declarationYear = option.year
		queryParams.belongToArea = option.belongToArea
		await listDataFn()
		await integralDetailApiFn()
		data.endTime = showCurrentTime()
	})
	onReachBottom(() => {
		if (data.total > 0 && data.list.length == data.total) return
		isLoading.value = "正在加载更多数据~~";
		++queryParams.params.pageNum;
		integralDetailApiFn();
	})
	watch(()=>data.single, (n, o) => {
		queryParams.params.startTime=n?`${n} 00:00:00`:""
		queryParams.params.endTime=n?`${n} 23:59:59`:""
		data.list = []
		queryParams.params.pageNum=1
		integralDetailApiFn();
	})
	//重置
	 const restFn=(dateVal)=>{
	 	data.single=""
	 } 
	//字典数据
	const listDataFn = async () => {
		await listData({
			dictType: "activity_classification"
		}).then(res => {
			dictData.value = res.rows
		})
	}
	//获取数据
	const integralDetailApiFn = async () => {
		await integralDetailApi(queryParams).then(res => {
			data.list = data.list.concat(res.rows)
			data.total = parseInt(res.total)
			isLoading.value = data.list.length == data.total ? "没有更多数据了" : ""
		})
	}
	//活动类目
	const activityClassName = (activityClassification) => {
		let dictLabel = "";
		if (dictData.value.length == 0) return dictLabel;
		dictData.value.forEach((item) => {
			if (item.dictValue == activityClassification) {
				dictLabel = item.dictLabel;
			}
		});
		return dictLabel;
	};
	//时间筛选
	const bindDateChange = (e) => {
		data.single = e;
	}
	const showCurrentTime = () => {
		var now = new Date();
		var year = now.getFullYear(); // 得到年份
		var month = now.getMonth() + 1; // 得到月份
		var date = now.getDate(); // 得到日期
		var hour = now.getHours(); // 得到小时数
		var minute = now.getMinutes(); // 得到分钟数
		var second = now.getSeconds(); // 得到秒数
		second = second.toString().length == 1 ? '0' + second : second;
		minute = minute.toString().length == 1 ? '0' + minute : minute;
		return `${year}-${month}-${date}`;
	}
</script>

<style lang="scss" scoped>
	.date{
		display: flex;
		color: $uni-text-color-grey;
		align-items: center;
		padding: 0 20rpx;
		margin-bottom: 10rpx;
		background-color: #c12130;
		.label{
			color: $uni-text-color-inverse;
		}
	}
	.container-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.container-label {
			font-size: 28rpx;
			color: $uni-color-primary;
		}

		.container-value {
			font-size: 28rpx;
			color: $uni-text-color-grey;
			max-width: calc(100% - 200rpx);
			word-break: break-all;
		}
	}

	.container-item:last-child {
		margin-bottom: 0;
	}

	.container {
		padding: 26rpx 20rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx rgba(8, 23, 56, 0.05);
		border-radius: 20rpx;
		margin: 0 30rpx 20rpx 30rpx;
	}

	.loading {
		font-size: 24rpx;
		color: #979797;
		margin: 40rpx auto;
		width: fit-content;
	}
	::v-deep .uni-date-x {
		color: $uni-text-color-inverse;
		background-color: transparent;
		.uni-icons {
			color: $uni-text-color-inverse !important;
		}
	}
</style>